<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-----------------弹出框----------------------------->
<div id="spuSaleAttr_dlg" class="easyui-dialog" title="编辑spu" style="width:500px;height:400px;"
     closed="true"  data-options="iconCls:'icon-save',resizable:true,modal:false" buttons="#spuSaleAttrBtns" >
    <form id="spuAttrForm">
        <br/><br/>
        <!------------------从基本销售属性中选择------------->

        <label>销售属性：</label>
        <select name="saleAttr" id="saleAttrSelect" class="easyui-combobox" data-options="valueField:'id',textField:'name',url:'baseSaleAttrList'" style="width: 100px"/>

        </select>
        <br/><br/>

        <!----------------销售属性列表---------------------------->
        <table id="spuSaleAttrValueDg" class="easyui-datagrid" title="销售属性值列表"
               data-options="singleSelect:true,method:'get' ,toolbar:'#spuSaleAttrValueTootbar'">

        </table>
        <!----------------销售属性值列表工具栏----------------------->

        <div id="spuSaleAttrValueTootbar" style="padding:5px;height:auto">
            <div  style="margin-bottom:5px">
                <a href="#" id="spuSaleAttrValueAddBtn" onclick="addSpuSaleAttrValue()" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>
                <a href="#" id="spuSaleAttrValueRemoveBtn"class="easyui-linkbutton" onclick="removeSpuSaleAttrValue()" data-options="iconCls:'icon-remove',plain:true">删除</a>

            </div>
        </div>
    </form>
</div>
<div id="spuSaleAttrBtns">
    <a href="#" class="easyui-linkbutton" onclick="saveSpuSaleAttr()">保 存</a>
    <a href="#" class="easyui-linkbutton" onclick="closeSpuSaleAttr()">关 闭</a>
</div>
<script language="JavaScript">




    function saveSpuSaleAttr(){
//    保存销售属性信息
//        alert('保存数据到暂存json');



        var saleAttrId =  $("#saleAttrSelect").combobox("getValue");

        var saleAttrName =  $("#saleAttrSelect").combobox("getText");
        var spuSaleAttrValueJson=$('#spuSaleAttrValueDg').datagrid('getData');
        if( !saleAttrName || !saleAttrId  ){
            layer.msg("目前没有保存数据！");
            $('#spuSaleAttr_dlg').dialog('close');
            return;
        }


        console.log(spuSaleAttrValueJson);

        $('#spuSaleAttrDg').datagrid('appendRow',{
            saleAttrId: saleAttrId,
            saleAttrName: saleAttrName,
            spuSaleAttrValueJson:spuSaleAttrValueJson
        });


        $('#spuSaleAttr_dlg').dialog('close');
    }
    function closeSpuSaleAttr(){

        $('#spuSaleAttr_dlg').dialog('close');
    }


    function initSpuSaleAttrDlg(){
        alert("初始化spu销售值属性列表");
        //清空销售属性值列表数据
        $('#spuSaleAttrValueDg').datagrid('loadData', { total: 0, rows: [] });

        datagrid = $('#spuSaleAttrValueDg').datagrid({
            url:'datagrid_data.json',
            columns:[[
                {field:'saleAttrId',title:'销售属性编号',width:100},
                {field:'saleAttrValueName',title:'销售属性值名称',width:100,
                    editor:{type:"validatebox",options:{required:true}}},
            ]],
            onDblClickRow: function (rowIndex, rowData) {
                //双击开启编辑行
                datagrid.datagrid("beginEdit", rowIndex);
                //设定当失去焦点时,退出编辑状态
                var valueName = rowData.valueName;
                $("input.datagrid-editable-input").val(valueName).bind("blur",function(evt){
                    datagrid.datagrid('endEdit',rowIndex);
                });
            },

        });
    }

    //拼接添加销售属性值
    function addSpuSaleAttrValue(){
        $('#spuSaleAttrValueDg').datagrid('appendRow',{
            saleAttrId: '0',
            saleAttrValueName: "销售属性值名称",
        });
    }

    //删除行
    function removeSpuSaleAttrValue(){
//        获得被选中的行
        var row = $("#spuSaleAttrValueDg").datagrid("getSelected");
//                        获得被选中行的索引
        var index = $("#spuSaleAttrValueDg").datagrid("getRowIndex");
//                        根据指定索引位置的行进行删除
        $("#spuSaleAttrValueDg").datagrid("deleteRow",index);
    }

</script>
</body>
</html>